<script setup>
import Table from "@/components/Table/index.vue";
import {onMounted, reactive, ref} from "vue";
import {tableList} from "@/views/dashboard/libs.js";
let dataList = ref([])
const tableColumns = ref([
  {
    key: 'name',
    label: '用户名称'
  },
  {
    key: 'state',
    label: '状态',
    hasEnum: true
  },
  {
    key: 'city',
    label: '城市',
  },
  {
    key: 'address',
    label: '地址'
  },
  {
    key: 'zip',
    label: '编号'
  }
])
const searchConfigs = ref([
  {
    name: '用户名称',
    value:'',
    key: 'name',
    type: 'input',
    span: 6
  },
  {
    name: '状态',
    value:'',
    key: 'state',
    type: 'select',
    options: [{
      label: '待提交',
      value: 0
    },{
      label: '已提交',
      value: 1
    }],
    span: 6
  },
  {
    name: '开始时间',
    value:'',
    key: 'startTime',
    type: 'time',
    span: 6
  },
  {
    name: '结束时间',
    value:'',
    key: 'endTime',
    type: 'time',
    span: 6
  },{
    name: '结束时间',
    value:'',
    key: 'endTime',
    type: 'time',
    span: 6
  },
  {
    name: '结束时间',
    value:'',
    key: 'endTime',
    type: 'time',
    span: 6
  },
  {
    name: '结束时间',
    value:'',
    key: 'endTime',
    type: 'time',
    span: 6
  },
  {
    name: '结束时间',
    value:'',
    key: 'endTime',
    type: 'time',
    span: 6
  },
  {
    name: '结束时间',
    value:'',
    key: 'endTime',
    type: 'time',
    span: 6
  },

])
const pageInfo = ref({
  pageNum: 1,
  pageSize:10
})
const searchInfo = ref({
  name:'',
  state:'',
  startTime:''
})
const total = ref(0)
onMounted(() => {
  getDataList()
})
const getDataList = () => {
  const data = tableList
  total.value =data.length
  dataList.value = data.slice((pageInfo.value.pageNum -1)* pageInfo.value.pageSize,pageInfo.value.pageNum* pageInfo.value.pageSize)
}
// 查询数据
const queryData = () => {
  searchConfigs.value.forEach(search => {
    searchInfo.value[search.key] = search.value
  })
  console.log(searchInfo.value)
//
}
// 清空数据
const clearData = () => {
  searchConfigs.value.forEach(item => {
    item.value = ''
  })
}
</script>

<template>
  <div class="page-container">
    <Table :dataList="dataList"
           :searchConfigs="searchConfigs"
           :total="total"
           :page-info="pageInfo"
           :tableColumns="tableColumns"
           @getDataList="getDataList"
    >
      <template v-slot:search-btn>
        <el-button type="primary" @click="queryData">查询</el-button>
        <el-button @click="clearData">清空</el-button>
      </template>
      <template v-slot:enumTable>
        <el-table-column label="状态" align="center">
          <template #default="scope">
            <div>{{scope.row.state=== 0?'待提交':'已提交'}}</div>
          </template>
        </el-table-column>
      </template>
      <template v-slot:operateTable>
                <el-table-column label="操作" width="120px" align="center">
                  <template #default="scope">
                    <div class="operate-table-box">
                      <el-button type="primary" size="small">详情</el-button>
                    </div>
                  </template>
                </el-table-column>
      </template>
    </Table>
  </div>
</template>

<style scoped lang="less">

</style>
